<template>
  <BasicModal
    title="余额充值"
    useWrapper
    :minHeight="600"
    @register="registerModal"
    v-bind="$attrs"
    :bodyStyle="{ backgroundColor: '#4095e5' }"
    :maskClosable="false"
    destroyOnClose
    :closeFunc="onClose"
  >
    <a-card style="padding: 0; text-align: center">
      <template #title>
        <div
          >充值金额：
          <span class="text-red">{{ info?.amount }}</span>
        </div>
      </template>
      <a-row>
        <a-col :span="24"
          >订单号：{{ info.order }}
          <Copyline :text="info.order" />
        </a-col>
        <a-col :span="24" class="prefix"
          >截止付款倒计时：{{ coundown.minutes }} 分 {{ coundown.seconds }} 秒</a-col
        >
      </a-row>
    </a-card>

    <a-card style="margin-top: 4px; text-align: center" v-if="type == 1">
      <template #title>
        <div class="text-red"
          >充值USDT数量：{{ info?.USDT }}
          <Copyline :text="info?.USDT" />
        </div>
        <div
          style="font-size: 14px; font-weight: 400; white-space: normal"
          v-html="diglogInfo.content"
        ></div>
      </template>
      <a-row>
        <a-col :span="24" style="display: flex; justify-content: center">
          <img :src="info?.src" alt="qrcode" style="width: 140px; height: 140px" />
        </a-col>
        <a-col :span="24"
          >币址：<span class="text-red">{{ info?.address }}</span>
          <Copyline :text="info?.address" />
        </a-col>
      </a-row>
    </a-card>

    <a-card style="margin-top: 4px; text-align: center" v-if="type == 0">
      <template #title>
        <div class="text-red"
          >账号：{{ info?.address }}
          <Copyline :text="info?.address" />
        </div>
        <div class="text-red"
          >姓名：{{ info?.name }}
          <Copyline :text="info?.name" />
        </div>
        <div
          style="font-size: 14px; font-weight: 400; white-space: normal"
          v-html="diglogInfo.content"
        ></div>
      </template>
      <a-row>
        <a-col :span="24" style="display: flex; justify-content: center">
          <a-qrcode :src="info?.src" />
        </a-col>
      </a-row>
    </a-card>

    <a-card :title="diglogInfo2?.title" style="margin-top: 4px; text-align: center">
      <div v-html="diglogInfo2?.content"></div>
    </a-card>
  </BasicModal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import Copyline from '@/components/Copyline/index.vue';
  import { PayStatusApi } from '@/api/user';
  import { message } from 'ant-design-vue';
  import { getReminderInfo } from '@/utils/helper';

  let timer;
  const type = ref(1);
  const info = ref({});
  const diglogInfo = ref({});
  const diglogInfo2 = ref({});
  const [registerModal, { closeModal }] = useModalInner(async (data) => {
    info.value = data.info;
    type.value = data.type;
    maxtime.value = data.info.pay_time_end;
    CountDown();
    timer = setInterval(CountDown, 1000);
    diglogInfo.value = await getReminderInfo('app_recharge_' + data?.payment_t + '_top');
    diglogInfo2.value = await getReminderInfo('app_recharge_' + data?.payment_t + '_bottom');
  });
  const maxtime = ref(0);
  const coundown = ref({
    minutes: 0,
    seconds: 0,
  });

  function getOrderStatus() {
    if (info.value.order) {
      PayStatusApi({ order: info.value.order }).then((res) => {
        if (res.status == 1) {
          message.success('充值成功');
          clearInterval(timer);
          closeModal();
          return;
        } else if (res.status == 2 || res.status == 3) {
          message.error('已过期或已冻结');
          clearInterval(timer);
          closeModal();
        }
      });
    }
  }

  function CountDown() {
    if (maxtime.value >= 0) {
      let minutes = Math.floor(maxtime.value / 60);
      let seconds = Math.floor(maxtime.value % 60);
      coundown.value = {
        minutes,
        seconds,
      };
      --maxtime.value;
      getOrderStatus();
    } else {
      message.error('已过期或已冻结');
      clearInterval(timer);
      closeModal();
    }
  }

  function onClose() {
    clearInterval(timer);
    return true;
  }
</script>
